<template>
  <div>
    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTable ref="table" :isSelectColumn="false" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :datakey="'records'" :onColumnsChange="columns => (this.columns = columns)">
      </FilterTable>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'center'
        }"
      >
        <multiuse-button size="small" type="primary" :click="exportHandler">导 出</multiuse-button>
        <el-button @click="closeDrawer(2)" type="primary">确 定</el-button>
        <el-button @click="closeDrawer(1)">关 闭</el-button>
      </div>
    </Spin>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { detailInfo, balanceExportExcel } from '@/api/omFinance/FinanceManage/InvoiceNumberQuery';
import { getDealerUser } from '@/api/omFinance';
import { exportExcelFile } from '@/utils/index';

export default {
  mixins: [dictionary],
  props: ['rowData'],
  data() {
    return {
      columns: this.createdTable(),
      fetchApi: detailInfo,
      fetchParams: { billId: this.rowData.id },
      exportLoading: false,
      tableData: []
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async getUser() {
      let res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.userName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'createdBy').editItems = empList; //操作姓名
      this.columns.find(item => item.dataIndex === 'createdBy').filterItems = empList;
    },
    // 导出
    async exportHandler() {
      await this.$confirm('是否将Excel表格保存至本地文件夹?', '提示', {
        confirmButtonText: '下载',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.exportLoading = true;

          balanceExportExcel(this.fetchParams)
            .then(response => {
              exportExcelFile(response.data, '余额锁定明细查询');
              this.exportLoading = false;
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    closeDrawer(type) {
      if (type == 1) {
        return this.$emit('close', false);
      }
      if (type == 2) {
        return this.$emit('close', false, this.tableData);
      }
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '销售订单号',
          dataIndex: 'doNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          align: 'center',
          width: 200
        },
        // {
        //   title: '单据流水编号',
        //   dataIndex: 'billNo',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '经销商代码',
          dataIndex: 'ownerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商简称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '绑定金额',
          dataIndex: 'chngAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '三方票号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车辆状态',
          dataIndex: 'vehicleStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6040'),
          render: props => {
            return <span>{this.createDictText(parseInt(props.row.vehicleStatus), '6040')}</span>;
          }
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '绑定时间',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '操作人',
          dataIndex: 'createdBy',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editItems: []
        }
      ];
    }
  }
};
</script>
